import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,DatePicker ,Table,Button,TreeSelect,  Popconfirm,Row,Col,
  InputNumber} from 'antd';

import moment from 'moment';
// 推荐在入口文件全局设置 locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const Option=Select.Option;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
const formItemLayout1 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
    };
var _this,attrValuesForm={},existsSerial=false;

class DynamicSearchModal extends Component {

  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        var list = [];
        _this.props.groupList.map((c)=>{
          c.attrList.map((d)=>{
            if(d.type == 5){
              var time = values[d.id_]?values[d.id_].toLocaleString():undefined;
              list.push({attrId: d.id_,value: time})
            }else{
              list.push({attrId: d.id_,value: values[d.id_]})
            }
          })
        })

        onOk({list: list, assetId: _this.props.assetId,values},_this.props.form.resetFields);
      }
     });
  };

  onCancel = ()=>{
    this.props.form.resetFields()
    this.props.onCancel()
  }

  handleRoomChange = (value) => {
    const { handleRoomChange } = this.props;
    handleRoomChange(value);
  };

  handleBrandChange= (value) => {
    this.props.form.setFieldsValue({modelId: undefined});//设置modelId控件的值为空
    this.props.handleBrandChange({brandId:value,typeId:_this.props.form.getFieldValue("typeId")});
  };

  handleTypeChange= (value) => {
    this.props.form.setFieldsValue({modelId: undefined});//设置modelId控件的值为空
    this.props.handleBrandChange({typeId:value,brandId:_this.props.form.getFieldValue("brandId")});
  };

  getSelectOption = (str) => {
    var list = str.split(",");
    return list.map((d,index)=>(<Option key={index} value={d}>{d}</Option>))
  }

  getallForm = (list)=>list.map((d,index)=>(
    <div key={index}>
      <div style={{fontSize: 14,color: "#333", marginBottom: 10,}}>{d.name}</div>
      <div style={{marginBottom: 15,borderBottom: '1px solid #e9e9e9'}}></div>
      <Row>
        {_this.getFormItemList(d.attrList)}
      </Row>
    </div>
  ))

  getFormItemList = (list) => list.map((d,index)=>(
    <Col key={index} span={6}>
      {_this.getSwitchItem(d)}
    </Col>
  ))

  getSwitchItem = (item) => {
    switch(item.type){
      case 1:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_, {
                  initialValue: attrValuesForm[item.id_],
                  rules: item.isNotNull?[
                    {required: true, message: '请输入'+item.lable},
                  ]:[],
                })(<Input />)
              }
            </FormItem>
        )
      case 2:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_, {
                  initialValue: attrValuesForm[item.id_]?attrValuesForm[item.id_]+"":undefined,
                  rules: item.isNotNull?[
                    {required: true, message: '请输入'+item.lable},
                  ]:[],
                })(<InputNumber style={{width: "100%"}}/>)
              }
            </FormItem>
        )
      case 3:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_, {
                  initialValue: attrValuesForm[item.id_],
                  rules: item.isNotNull?[
                    {required: true, message: '请输入'+item.lable},
                  ]:[],
                })(<Input.TextArea />)
              }
            </FormItem>
        )
      case 4:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_, {
                  initialValue: attrValuesForm[item.id_],
                  rules: item.isNotNull?[
                    {required: true, message: '请输入'+item.lable},
                  ]:[],
                })(
                  <Select>
                    {_this.getSelectOption(item.options)}
                  </Select>
                )
              }
            </FormItem>
        )
      case 5:
        return (
            <FormItem
              {...formItemLayout}
              hasFeedback
              label={item.lable}
            >
              {
                _this.props.form.getFieldDecorator(item.id_, {
                  initialValue: attrValuesForm[item.id_]?moment(new Date(attrValuesForm[item.id_]), 'YYYY-MM-DD'):undefined,
                  rules: item.isNotNull?[
                    {required: true, message: '请输入'+item.lable},
                  ]:[],
                })(<DatePicker format="YYYY-MM-DD" showToday/>)
              }
            </FormItem>
        )
      default:
        return null;
    }
  }

  render() {
    const { children, dispatch,assetData,} = this.props;
    const { getFieldDecorator} = this.props.form;
    attrValuesForm =this.props.attrValuesForm;
    _this = this;

    return (
      <span>
        <Modal
            maskClosable= {this.props.maskClosable}
            confirmLoading= {this.props.confirmLoading}
            title={this.props.title}
            top={50}
            width={1100}
            visible={this.props.visible}
            footer={[
              <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
            ]}
            onCancel={this.props.onCancel}
            key={this.props.newKey}
        >
         <div style={{width:'auto',position:'relative',backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
              <div style={{backgroundColor:'#fff',paddingLeft:'20px',paddingRight:'20px'}}>
                <Form >
                <div>
                  <div style={{fontSize: 14,color: "#333", marginBottom: 10,}}>资产属性</div>
                  <div style={{marginBottom: 15,borderBottom: '1px solid #e9e9e9'}}></div>
                  <Row>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="资产名称"
                      >
                        {getFieldDecorator("assetName", {initialValue: assetData.assetName,})(<Input readOnly="readonly"/>)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="资产编号"
                      >
                        {getFieldDecorator("assetNo", {initialValue: assetData.assetNo,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="序列号"
                      >
                        {getFieldDecorator("serialNo", {initialValue: assetData.serialNo,})(<Input readOnly="readonly"/>)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="RFID号"
                      >
                        {getFieldDecorator("rfidNo", {initialValue: assetData.rfidNo,})(<Input readOnly="readonly"/>)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="资产类型"
                      >
                        {getFieldDecorator("typeId", { initialValue: assetData.typeName,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="品牌"
                      >
                        {getFieldDecorator("brandId", {initialValue: assetData.brandName,})(<Input  readOnly="readonly"/>)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="型号"
                      >
                        {getFieldDecorator("modelId", {initialValue: assetData.modelName,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="价格"
                      >
                        { getFieldDecorator("price",{initialValue: assetData.price,})(<Input readOnly="readonly" />)
                        }
                      </FormItem>
                    </Col>

                  </Row>
                  <Row>
                    <Col span={24}>
                     <FormItem
                        hasFeedback
                        {...formItemLayout1}
                        label="设备描述"
                      >
                        {getFieldDecorator("remark", {initialValue: assetData.remark,})(<Input type="textarea" readOnly="readonly" autosize={{ minRows:2, maxRows: 2 }} />)}
                      </FormItem>
                    </Col>
                  </Row>
                </div>

                <div>
                  <div style={{fontSize: 14,color: "#333", marginBottom: 10,}}>资产扩展属性</div>
                  <div style={{marginBottom: 15,borderBottom: '1px solid #e9e9e9'}}></div>
                  <Row>
                    <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="IP地址"
                      >
                        {getFieldDecorator("ip", {initialValue: assetData.ip,})(<Input readOnly="readonly"/>)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="机房"
                      >
                        {getFieldDecorator("roomId", {initialValue: assetData.roomName,})(<Input  readOnly="readonly"/>)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="机柜"
                      >
                        {getFieldDecorator("rackId", {initialValue: assetData.rackName,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        label="起始U"
                      >
                        {getFieldDecorator("start", {initialValue: assetData.startU,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>                  
                  </Row>
                </div>

                <div>
                  <div style={{fontSize: 14,color: "#333", marginBottom: 10,}}>资产使用属性</div>
                  <div style={{marginBottom: 15,borderBottom: '1px solid #e9e9e9'}}></div>
                  <Row>
                    <Col span={6}>
                    <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="管理部门"
                      >
                        {getFieldDecorator("manageBranchName", {initialValue: assetData.manageBranchName,})(<Input readOnly="readonly"/>)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="使用部门"
                      >
                        {getFieldDecorator("branchName", {initialValue: assetData.branchName,})(<Input  readOnly="readonly"/>)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="使用人"
                      >
                        {getFieldDecorator("endUserName", {initialValue: assetData.endUserName,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                                 
                  </Row>
                </div>


                <div>
                  <div style={{fontSize: 14,color: "#333", marginBottom: 10,}}>资产维保属性</div>
                  <div style={{marginBottom: 15,borderBottom: '1px solid #e9e9e9'}}></div>
                  <Row>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="供货方"
                      >
                        {getFieldDecorator("supplier", {initialValue: assetData.supplier,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="联系人"
                      >
                        {getFieldDecorator("contacts", {initialValue: assetData.contacts, })(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>
                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="联系电话"
                      >
                        {getFieldDecorator("contactsPhone", {initialValue: assetData.contactsPhone,})(<Input readOnly="readonly" />)}
                    </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="售后电话"
                      >
                        {getFieldDecorator("hotline", {initialValue: assetData.hotline,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="合同号"
                      >
                        { getFieldDecorator("contractNo", {initialValue: assetData.contractNo,})(<Input readOnly="readonly" />)}
                      </FormItem>
                    </Col>

                    <Col span={6}>
                     <FormItem
                        {...formItemLayout}
                        hasFeedback
                        label="发票号"
                      >
                        {getFieldDecorator("invoiceNo", {initialValue: assetData.invoiceNo,})(<Input readOnly="readonly" />) }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                          {...formItemLayout}
                          label="购置时间"
                          >
                          {getFieldDecorator('buyTime', {
                            initialValue:assetData.buyTime?moment(assetData.buyTime):"",
                          })(<DatePicker readOnly="readonly"  />)}
                      </FormItem>
                    </Col>
                      <Col span={6}>
                        <FormItem
                          {...formItemLayout}
                          label="保修到期时间"
                          >
                          {getFieldDecorator('expirationTime', {
                            initialValue:assetData.expirationTime?moment(assetData.expirationTime):"",
                          })(<DatePicker readOnly="readonly" />)}
                      </FormItem>
                    </Col>

                  </Row>
                </div>

                  {_this.getallForm(this.props.groupList)}

                </Form>
            </div>

            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(DynamicSearchModal)
